<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../layui/css/layui.css" rel="stylesheet">
    <link href="../css/dplist.css" rel="stylesheet">
</head>
<body>
<div class="dplist_outer">
    <div class="dplist_nav">
        当前位置 > 大棚管理 > <span class="color_green">大棚列表</span>
    </div>
    <div class="layui-row">
        <div class="layui-col-md12 dpcarouesel">
            <div class="layui-carousel " id="test1">
                <div carousel-item>
                    <div><img src="../images/banner_bg.png"></div>
                    <div>图片2<img src=""></div>
                    <div>图片3<img src=""></div>
                    <div>图片4<img src=""></div>
                    <div>图片5<img src=""></div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md12">
            <div class="dp_content_left">
                <div class="rotate">
                    <div class="dp_video">
                        <video id="videoplay1" src="" controls="controls"></video>
                    </div>
                    <div class="rotate_button">
                        <div class="rotate_btn rotateClick1">
                            <span class="rotate_btns rotate_btn_1"></span>
                            <span class="rotate_btns rotate_btn_2"></span>
                            <span class="rotate_btns rotate_btn_3"></span>
                            <span class="rotate_btns rotate_btn_4"></span>
                            <span class="rotate_btns rotate_btn_5"></span>
                            <span class="rotate_btns rotate_btn_6"></span>
                            <span class="rotate_btns rotate_btn_7"></span>
                            <span class="rotate_btns rotate_btn_8"></span>
                            <img class="rotate_btn_img1 " src="../images/control-0.png" ondragstart="return false;">
                        </div>
                        <div class="add_cut">
                            <img class="add_click_btn" src="../images/add.png" ondragstart="return false;">
                            <img class="cut_click_btn" src="../images/cut.png" ondragstart="return false;">
                        </div>
                        <p>Zoom</p>
                        <div class="rotate_full1">
                            <img src="../images/full.png">
                        </div>
                    </div>
                </div>
                <div class="rotate">
                    <div class="dp_video">
                        <video id="videoplay2" src="" controls="controls"></video>
                    </div>
                    <div class="rotate_button">
                        <div class="rotate_btn  rotateClick2">
                            <span class="rotate_btns rotate_btn_1"></span>
                            <span class="rotate_btns rotate_btn_2"></span>
                            <span class="rotate_btns rotate_btn_3"></span>
                            <span class="rotate_btns rotate_btn_4"></span>
                            <span class="rotate_btns rotate_btn_5"></span>
                            <span class="rotate_btns rotate_btn_6"></span>
                            <span class="rotate_btns rotate_btn_7"></span>
                            <span class="rotate_btns rotate_btn_8"></span>
                            <img class="rotate_btn_img2" src="../images/control-0.png" ondragstart="return false;">
                        </div>
                        <div class="add_cut">
                            <img class="add_click_btn" src="../images/add.png" ondragstart="return false;">
                            <img class="cut_click_btn" src="../images/cut.png" ondragstart="return false;">
                        </div>
                        <p>Zoom</p>
                        <div class="rotate_full2">
                            <img src="../images/full.png">
                        </div>
                    </div>
                </div>
            </div>
            <div class="dp_content_mid">
                <div class="dp_title">
                    环境监测
                </div>
                <div class="dp_jc">
                    <span><img src="../images/hjjc1.png"></img>空气度监测</span>
                </div>
                <div class="dp_jc_cont">
                    <span>
                            <b>13-18</b>
                            <i>空气湿度1</i>
                        </span>
                    <span>
                            <b>24</b>
                            <i>空气湿度2</i>
                        </span>
                    <span>
                            <b>13-18</b>
                            <i>空气湿度3</i>
                        </span>
                    <span>
                            <span class="dp_ts">
                                18-20
                            </span>
                            <b class="color_red">24<img src="../images/dp_up.png"></b>
                            <i>空气湿度4</i>
                        </span>
                    <span>
                            <b>13-18</b>
                            <i>空气湿度5</i>
                        </span>
                    <span>
                            <b>13-18</b>
                            <i>空气湿度6</i>
                        </span>
                    <span>
                            <b>13-18</b>
                            <i>空气湿度7</i>
                        </span>
                    <span>
                        <span class="dp_ts">
                                18-20
                        </span>
                        <b class="color_red">24<img src="../images/dp_down.png"></b>
                        <i>空气湿度8</i>
                    </span>
                </div>
                <div class="dp_jc">
                    <span><img src="../images/hjjc2.png"/>基质含与PH值检测</span>
                </div>
                <div class="dp_jc_cont">
                    <span>
                        <b>13-18</b>
                        <i>土壤温度1</i>
                    </span>
                    <span>
                        <b>24</b>
                        <i>土壤温度2</i>
                    </span>
                    <span>
                        <b>13-18</b>
                        <i>土壤温度3</i>
                    </span>
                    <span>
                        <span class="dp_ts">
                                18-20
                        </span>
                        <b class="color_red">24<img src="../images/dp_up.png"></b>
                        <i>土壤温度4</i>
                    </span>
                    <span>
                        <b>13-18</b>
                        <i>PH</i>
                    </span>
                </div>
                <div class="dp_jc">
                    <span><img src="../images/hjjc3.png"></img>其他检测指标</span>
                </div>
                <div class="dp_jc_cont">
                    <span>
                        <b>13-18</b>
                        <i>光照度</i>
                    </span>
                    <span>
                        <b>24</b>
                        <i>二氧化碳</i>
                    </span>
                </div>
            </div>
            <div class="dp_content_right">
                <div class="rotate">
                    <div class="dp_video right_video">
                        <img class="dp_wp" src="../images/dpwp.jpg">
                    </div>
                    <div class="auto_button">
                        <div class="dp_title">
                            微喷控制
                        </div>
                        <div class="auto_button_tab">
                            <div class="btnopen_outer dp_btnha">
                                <div class="btnopen_left"></div>
                                <div class="btnopen_right"></div>
                                <img src="../images/dp_hand.png">
                            </div>
                            <p>手动&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;自动</p>
                            <div class="btnopen_outer dp_btnoc " style="height: 32px">
                                <div class="openzz">
                                </div>
                                <div class="btnopen_left"></div>
                                <div class="btnopen_right"></div>
                                <img src="../images/dp_close.png">
                            </div>
                            <p>开启&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;关闭</p>
                        </div>
                    </div>
                </div>
                <div class="rotate">
                    <div class="dp_video right_video">
                        <img class="door_img" src="../images/scrolldoor0.jpg">
                    </div>
                    <div class="auto_button">
                        <div class="dp_title">
                            卷帘控制
                        </div>
                        <div class="auto_button_tab">
                            <div  class="btnopen_outer dp_btnjl">
                                <div class="btnopen_left"></div>
                                <div class="btnopen_right"></div>
                                <img src="../images/dp_hand.png">
                            </div>
                            <p>手动&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;自动</p>
                            <div class="add_cut_btn">
                                <div class="jl_clickzz"></div>
                                <span class="add_cut_left">-</span>
                                <span class="add_cut_txt">10</span>
                                <span class="add_cut_right">+</span>
                            </div>
                            <p class="dp_zx">
                                执行
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../layui/layui.js"></script>
<script src="../js/jquery-1.9.1.min.js"></script>
<script>
    //一般直接写在一个js文件中
    layui.use(['carousel'], function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always', //始终显示箭头
            autoplay:true,   //是否自动切换
            interval:3000    //轮播滚动间隔时间
        });
    });

    $(function () {
        //视频全屏方法
        $('.rotate_full1').on('click',function(){
            var ele = document.getElementById('videoplay1');   //获取视频元素
            FullScreen(ele);
        });
        $('.rotate_full2').on('click',function(){
            var ele = document.getElementById('videoplay2');   //获取视频元素
            FullScreen(ele);
        });
        function FullScreen(ele) {
            if (ele .requestFullscreen) {
                ele .requestFullscreen();
            } else if (ele .mozRequestFullScreen) {
                ele .mozRequestFullScreen();
            } else if (ele .webkitRequestFullScreen) {
                ele .webkitRequestFullScreen();
            } else if(ele.msRequestFullscreen ){
                ele.msRequestFullscreen()
            }
        }

        //上旋转按钮8八个方向点击事件
        $('.rotateClick1 >.rotate_btns').each(function (i,dom) {
            $(this).click(function () {
                console.log(i+1)        //点击第几个按钮位置
                $('.rotate_btn_img1').attr('src','../images/control-'+(i+1)+'.png')   //点击切换背景图片
            })
        })
        //下旋转按钮8八个方向点击事件
        $('.rotateClick2 >.rotate_btns').each(function (i,dom) {
            $(this).click(function () {
                console.log(i+1)        //点击第几个按钮位置
                $('.rotate_btn_img2').attr('src','../images/control-'+(i+1)+'.png')   //点击切换背景图片
            })
        })

        /*手动自动切换*/
        var  openflag=true;  //判断现在是开始还是关闭按钮
        $('.dp_btnha .btnopen_left').click(function () {          //点击微喷手动
            $(this).siblings('img').attr('src','../images/dp_hand.png');
            if(openflag){
                $('.dp_btnoc img').attr('src','../images/dp_open.png')
            }else{
                $('.dp_btnoc img').attr('src','../images/dp_close.png')
            }
            $('.openzz').hide()
        })
        $('.dp_btnha .btnopen_right').click(function () {       //点击微喷自动
            $(this).siblings('img').attr('src','../images/dp_auto.png')
            $('.dp_btnoc img').attr('src','../images/dp_hui.png')
            $('.openzz').show()
        })
        $('.dp_btnoc .btnopen_left').click(function () {     //点击开启
            $(this).siblings('img').attr('src','../images/dp_open.png');
            $(".dp_wp").attr('src','../images/wpgif.gif')      //切换动态图
            openflag=true;
        })
        $('.dp_btnoc .btnopen_right').click(function () {     //点击关闭
            $(this).siblings('img').attr('src','../images/dp_close.png');
            $(".dp_wp").attr('src','../images/dpwp.jpg')       //切换静态图
            openflag=false;
        })
        $('.dp_btnjl .btnopen_left').click(function () {          //点击卷帘手动
            $(this).siblings('img').attr('src','../images/dp_hand.png');
            $('.add_cut_btn,.dp_zx').removeClass('jl_zz');
            $('.jl_clickzz').hide();
        })
        $('.dp_btnjl .btnopen_right').click(function () {       //点击卷帘自动
            $(this).siblings('img').attr('src','../images/dp_auto.png')
            $('.add_cut_btn,.dp_zx').addClass('jl_zz');
            $(".jl_clickzz").show();
        })
        /*点击加减号*/
        $(".add_click_btn").mousedown(function () {
            $(this).attr('src','../images/addl.png')
        })
        $(".add_click_btn").mouseup(function () {
            $(this).attr('src','../images/add.png')
        })
        $(".cut_click_btn").mousedown(function () {
            $(this).attr('src','../images/cutl.png')
        })
        $(".cut_click_btn").mouseup(function () {
            $(this).attr('src','../images/cut.png')
        })
        
        
        /*卷帘门速度按钮*/
        $('.add_cut_right').click(
            function () {
               var num= parseInt($('.add_cut_txt').text())+10;
               if(num<=100){
                   $('.add_cut_txt').text(num)
               }
            }
        )
        $('.add_cut_left').click(
            function () {
                var num= parseInt($('.add_cut_txt').text())-10;
                if(num>=0){
                    $('.add_cut_txt').text(num)
                }
            }
        )

        /*卷帘门开始运动函数*/
        function doorMove(flag){
            if(flag){             //图片变成上升gif
                $('.door_img').attr('src','../images/doorup.gif')
            }else{                 //图片变成下降gif
                $('.door_img').attr('src','../images/doordown.gif')
            }
        }
       /* doorMove(true)  //上升
        doorMove()  //下降*/
        /*卷帘门开始运动完成函数*/
        function doorOver(num){
            $('.door_img').attr('src','../images/scrolldoor'+num+'.jpg')
        }
        /*doorOver(0)   //开启0
        doorOver(10)
        doorOver(20)
        doorOver(100)   //开启100
         */

        /*环境监测悬浮显示提示框*/
        $('.dp_jc_cont>span').hover(function () {
            $(this).children('.dp_ts').show()
        },function () {
            $(this).children('.dp_ts').hide()
        })
    })
</script>
</html>